<template>
  <div class="sidebar">
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
      :default-active="active_menu" text-color="#fff" router>
      <template v-for="(item, indexName) in menus" :key="indexName">
        <template v-if="item.subs">
          <!-- <el-menu-item :index="item.index"> </el-menu-item> -->
          <el-sub-menu :index="item.index">
            <template #title>{{ item.title }}</template>
            <el-menu-item v-for="(itemNext, index2) in item.subs" :key="index2" :index="itemNext.index">{{ itemNext.title
            }}</el-menu-item>
          </el-sub-menu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
            <span>{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>
  
<script lang="ts">
import { defineComponent, ref } from "vue";
import { useRoute } from "vue-router";

export default defineComponent({
  props: ["menu_list"],
  setup(props) {
    let menus = ref(props.menu_list);
    const route = useRoute(); // 活跃状态的路由
    return {
      menus,
      active_menu: route ? route.name : '', //刷新页面菜单栏不会掉状态（默认选中状态不会去掉）
    };
  },

});
</script>
  
<style lang="scss">
.sidebar {
  background: #fff !important;
  width: 240px;
  height: 92vh;
  position: absolute;
  left: 0;
  top: 0;

  .el-menu {
    background: #fff;

    // .el-menu-item {
    .el-sub-menu__title {
      color: #666 !important;
    }
  }
}

.el-sub-menu.is-active .el-sub-menu__title {
  color: red !important;
}

//   }
// }
.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: transparent !important;
  color: transparent !important;
  background-color: #fff !important;
}

.el-sub-menu__title {
  background-color: transparent !important;
}

.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-sub-menu__title {
  background-color: white !important;
  color: #909399 !important;
}

.el-menu--popup {
  background-color: white !important;
}

.el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu .el-sub-menu.is-active>.el-sub-menu__title {
  color: #2a5389 !important;
  font-weight: 600;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  outline: 0;
  color: white !important;
  background-color: #EBF0FB !important;
}

// .el-menu--horizontal>.el-sub-menu .el-sub-menu__title{
//   border-bottom: none !important;
// }
.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
  border-bottom: none !important;
  background-color: #EBF0FB !important;
}

.el-sub-menu__title:hover {
  background-color: #EBF0FB !important;
  // color: rgb(0, 255, 13) !important;
}

.el-menu-item:hover {
  background-color: #dbe5fa !important;
  color: #264E71 !important;
}

.el-menu-item {
  color: #333 !important;
}

// .el-menu-item {
//   // background-color: rgba(0, 0, 0, 0.1);
// }

.el-menu-item.is-active {
  background-color: #d5ebfa !important;
  color: #2a5389 !important;
}
</style>